// 轮播ajax调用接口
function getBannerList() {
    let xhr = new window.XMLHttpRequest()
    // 建立连接
    xhr.open('GET', `http://api.yuguoxy.com/api/shop/banner`)
    // 发送请求
    xhr.send()
    // 处理相应数据
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
            if (xhr.status == 200) {
                let res = xhr.responseText
                res = JSON.parse(res)
                if (res.resultCode == 1) {
                    let list = res.resultInfo.list
                    showBanner(list)
                }
            }
        }
    }
}
getBannerList()
// 轮播图渲染接口
// 获取轮播的盒子
const bannerEle = document.querySelector('.swiper-wrapper')

function showBanner(productList) {
    let str = `
    <div class="swiper-slide"><img src="../img/1.jpg" alt=""></div>
    <div class="swiper-slide"><img src="../img/2.jpg" alt=""></div>
    `
    productList.forEach(item => {
        let newStr = `
        <div class="swiper-slide"><img src="${item.url}" alt=""></div>
        `
        str += newStr
    })
    bannerEle.innerHTML = str


    // 轮播图js
    var mySwiper = new Swiper('.swiper', {
        loop: true,
        mousewheel: true,
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        effect: 'fade',
        fadeEffect: {
            crossFade: true,
        },
        scrollbar: {
            el: '.swiper-scrollbar',
            draggable: true,
        },
        autoplay: {
            delay: 3000, //1秒切换一次
            pauseOnMouseEnter: true, //鼠标放上停止切换
        },
    });
    mySwiper.scrollbar.$dragEl.css('background', '#1428A0');

}

// 总页数
let totalNo = 0
let productListStr = ''
// 获取对应区域的列表
const contentEle = document.querySelector('#goods')
// 动态渲染数据
function showUserList(productList) {
    let arr = productList.map(item => {
        return `
        <div class="displayGood" data-index="${item.id}">
        <div>
            <img src="${item.picture}" alt="">
        </div>
        <p class="One">${item.shop}</p>
        <p class="price">￥<span>${item.price}</span></p>
        <button class="buyNow">立即抢购</button>
    </div>
            `
    })
    let str = arr.join('')
    productListStr = productListStr + str
    contentEle.innerHTML = productListStr
}

// ajax调用接口
function getUserList(pageNo) {
    let xhr = new window.XMLHttpRequest()
    // 建立连接
    xhr.open('GET', `http://api.yuguoxy.com/api/shop/list?pageNo=${pageNo}&pageSize=8`)
    // 发送请求
    xhr.send()
    // 处理相应数据
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
            if (xhr.status == 200) {
                let res = xhr.responseText
                res = JSON.parse(res)
                if (res.resultCode == 1) {
                    let list = res.resultInfo.list
                    totalNo = res.resultInfo.totalNum //总页数
                    showUserList(list)
                }
            }
        }
    }
}
// 加载更多
// 获取按钮
const moreEle = document.querySelector('.more')

function onMore() {
    let pageNo = 1
    moreEle.addEventListener('click', function () {
        if (++pageNo > totalNo) {
            pageNo = totalNo
        }
        getUserList(pageNo)
    })
}

// 点击跳转到详情页
const datailEle = document.querySelector('#goods')

function productHtml() {
    datailEle.addEventListener('click', function (e) {
        e = e || window.event
        let target = e.target || e.srcElement
        if (target.nodeName == 'BUTTON') {
            let fatherEle = target.parentNode
            let id = fatherEle.getAttribute('data-index')
            location.href = './productDetail.html?id=' + id
        }
        if (target.nodeName == 'IMG') {
            let fatherEle = target.parentNode.parentNode
            let id = fatherEle.getAttribute('data-index')
            location.href = './productDetail.html?id=' + id
        }
    })
}

productHtml()
onMore()
getUserList(1)


// 实现点击下拉功能
// 先获取触摸事件
const topEle = document.querySelector('.top')
// 获取下拉的弹框
const appearEle = document.querySelector('#appear')
topEle.addEventListener('mouseover', function (e) {
    e = e || window.event
    let target = e.target || e.srcElement
    let heightMove = parseInt(appearEle.style.height)
    if (heightMove == 0) {
        if (target.nodeName == 'LI') {
            changeSlow()
        }
    }
})

// 使用定时器实现长度变化
function changeSlow() {
    appearEle.style.zIndex = 2
    var a = 0
    var changeOver = setInterval(function () {
        a += 20
        appearEle.style.height = a + 'px'
        if (a >= 580) {
            clearInterval(changeOver)
        }

    }, 10)
}
// 定时器回缩
function changeBack() {
    var a = 480
    var changeOver = setInterval(function () {
        a -= 20
        appearEle.style.height = a + 'px'
        if (a <= 0) {
            clearInterval(changeOver)
        }
    }, 10)
}
// 鼠标移出缩回
// 获取鼠标移出的区域
// 获取整个区域
const navEle = document.querySelector('#nav')

function mouseMove() {
    navEle.addEventListener('mouseout', function () {
        changeBack()
    })
}
// mouseMove()
// 获取箭头
const arrowheadEle = document.querySelector('#appear .title span')

function mouseClick() {
    arrowheadEle.addEventListener('click', function () {
        changeBack()
    })
}
mouseClick()

// 定时器返回顶部
// 获取定时器的距离

function backTop() {
    var biu = window.setInterval(function () {
        document.documentElement.scrollTop -= 50
        if (document.documentElement.scrollTop <= 0) {
            clearInterval(biu)
        }
    }, 5)
}
// 获取回到顶部
const backTopEle = document.querySelector('#top')
backTopEle.addEventListener('click', function (e) {
    e = event || window.event
    e.preventDefault()
    backTop()
})

// 鼠标移动事件
// function trouble() {
//     document.addEventListener('mousemove', function (e) {
//         var y = e.clientY
//         if (y < 45 || y > 695) {
//             changeBack()
//         }
//     })
// }